<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心弹窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        .heart-popup {
            position: fixed;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            animation: heartBeat 0.6s ease-in-out;
            max-width: 350px;
            text-align: center;
            border: 3px solid #ff6b9d;
        }

        .heart-popup::before {
            content: '💖';
            font-size: 40px;
            display: block;
            margin-bottom: 15px;
            animation: float 2s ease-in-out infinite;
        }

        .heart-popup .message {
            font-size: 18px;
            color: #333;
            line-height: 1.6;
            font-weight: 500;
        }

        @keyframes heartBeat {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .heart-popup.closing {
            animation: fadeOut 0.5s ease-out forwards;
        }
    </style>
</head>
<body>
    <script>
        let messages = [];
        let messageIndex = 0;
        let activePopups = [];
        const maxConcurrentPopups = 20; // 最大同时显示的弹窗数量

        // 从后端获取所有文段
        async function loadMessages() {
            try {
                const response = await fetch('/api/messages');
                const data = await response.json();
                messages = data.messages || [];
                console.log(`已加载 ${messages.length} 条文段`);
                // 页面加载时立即显示满屏弹窗
                startFullScreenPopups();
            } catch (error) {
                console.error('加载文段失败:', error);
                // 如果API失败，使用备用文段
                messages = ['💕 你是我生命中最美好的遇见', '💖 每一次想你，都让我的心跳加速'];
                startFullScreenPopups();
            }
        }

        // 创建单个爱心弹窗
        function createHeartPopup(message) {
            const popup = document.createElement('div');
            popup.className = 'heart-popup';
            
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message';
            messageDiv.textContent = message;
            
            popup.appendChild(messageDiv);
            
            // 随机位置
            const x = Math.random() * (window.innerWidth - 350);
            const y = Math.random() * (window.innerHeight - 200);
            popup.style.left = x + 'px';
            popup.style.top = y + 'px';
            
            document.body.appendChild(popup);
            activePopups.push(popup);
            
            // 3秒后自动关闭
            setTimeout(() => {
                closePopup(popup);
            }, 3000);
            
            // 点击关闭
            popup.addEventListener('click', () => {
                closePopup(popup);
            });
        }

        // 关闭弹窗
        function closePopup(popup) {
            if (!popup || !popup.parentNode) return;
            
            popup.classList.add('closing');
            setTimeout(() => {
                if (popup.parentNode) {
                    popup.parentNode.removeChild(popup);
                }
                const index = activePopups.indexOf(popup);
                if (index > -1) {
                    activePopups.splice(index, 1);
                }
            }, 500);
        }

        // 启动满屏弹窗
        function startFullScreenPopups() {
            // 立即创建满屏弹窗（最多20个同时显示）
            const initialCount = Math.min(maxConcurrentPopups, messages.length);
            for (let i = 0; i < initialCount; i++) {
                const message = messages[i % messages.length];
                setTimeout(() => {
                    createHeartPopup(message);
                }, i * 100); // 错开时间，形成波浪效果
            }
            
            messageIndex = initialCount;
            
            // 持续弹出新弹窗
            setInterval(() => {
                // 控制同时显示的弹窗数量
                if (activePopups.length < maxConcurrentPopups && messages.length > 0) {
                    const message = messages[messageIndex % messages.length];
                    createHeartPopup(message);
                    messageIndex++;
                }
            }, 800); // 每800ms创建一个新弹窗
        }

        // 页面加载完成后开始
        window.addEventListener('load', () => {
            loadMessages();
        });
    </script>
</body>
</html>

